<template>
  <div>
    <div class="outmain ba_f">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>门店概况</span>
        </div>
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">门店总数量</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{jyData.shopNum || 0}}</p>
<!--              <p class="fon_12 title6 lh25">较前一日：0</p>-->
            </div>
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">门店总数量</div>-->
<!--                <button type="button"-->
<!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span><i class="el-icon-question"></i></span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">直营店数量</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{jyData.zhiShopNum || 0}}</p>
<!--              <p class="fon_12 title6 lh25">较前一日：0</p>-->
            </div>
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">直营店数量</div>-->
<!--                <button type="button"-->
<!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span><i class="el-icon-question"></i></span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">加盟店数量</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{jyData.jiaShopNum || 0}}</p>
<!--              <p class="fon_12 title6 lh25">较前一日：0</p>-->
            </div>
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">加盟店数量</div>-->
<!--                <button type="button"-->
<!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span><i class="el-icon-question"></i></span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">申请待提现</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{jyData.money || 0}}</p>
<!--              <p class="fon_12 title6 lh25">较前一日：0</p>-->
            </div>
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">申请待提现</div>-->
<!--                <button type="button"-->
<!--                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span><i class="el-icon-question"></i></span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
          </div>
        </div>
      </div>
      <div id="zhentiEch" style="height: 360px;" class="mar_t40"></div>
    </div>
    <div class="mar_t20 pad_20 ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>门店排行</span>
        </div>
      </div>
      <div class="mar_t20 flex-bet">
        <div class="flex-g-1" style="height: 380px;">
          <div class="mar_t10 shuju_table">
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
              <el-table-column
                      type="index"
                      label="排名"
                      width="200"
              >
              </el-table-column>
              >
              <el-table-column
                      prop="name"
                      label="门店名称"
              >
              </el-table-column>
              >
              <el-table-column
                      prop="money"
                      label="营业额">
              </el-table-column>
              <el-table-column
                      prop="count"
                      label="订单数">
              </el-table-column>
              <el-table-column
                      prop="visit"
                      label="访问量">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import echarts from "echarts";
  import {shopSurvey} from "@/api/shop";
  import {changeDate} from "@/utils/index";
  import {mapState} from 'vuex'
  export default {
    mounted() {
      // this.bus.$emit('loading', true);
      this.init();
    },
    data () {
      return {
        value: '',
        form: {
          shopValue: '',
          timeType: '1',
          time: new Date(),
          Mtime: '',
        },
        options: [{
          value: '1',
          label: '全部'
        }],
        options2: [{
          value: '1',
          label: '自然日'
        }, {
          value: '2',
          label: '自然月'
        }],
        jyData:{
          shopNum:'',
          zhiShopNum:'',
          jiaShopNum:'',
          money:'',
        },
        echarts2_option: {
          color: ['#4284ED', '#42CCF0'],
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['营业总额', '支付订单数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            // 去除坐标轴上的刻度线
            axisTick: {
              show: false,
              lineStyle: {
                color: '#ccc',
                type: 'dashed'
              }
            },
            // x轴的字体样式
            axisLabel: {
              show: true,
              textStyle: {
                color: '#333',
                fontSize: '12'
              }
            },
            // x轴的颜色和宽度
            axisLine: {
              lineStyle: {
                color: '#f7f7f7',
                width: 2,   //这里是坐标轴的宽度,可以去掉
              }
            },
            data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
          },
          yAxis: {
            type: 'value',
            axisTick: {       //y轴刻度线
              "show": false
            },
            axisLine: {
              "show": false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#333',
                fontSize: '12'
              }
            },
            splitLine: {
              lineStyle: {
                type: 'dotted',
                color: '#DDDDDD',
              },
              show: true
            }
          },
          series: [
            {
              name: '营业总额',
              type: 'line',
              stack: '总量',
              smooth: true,
              data: [10, 32, 25, 15, 40, 15, 20, 10, 22, 30, 25,]
            },
            {
              name: '支付订单数',
              type: 'line',
              stack: '总量',
              smooth: true,
              data: [80, 22, 20, 10, 25, 35, 20, 10, 64, 20, 90,]
            }
          ]
        },
        tableData:[],
      }
    },
    methods: {
      init() {
        this.realAnalysis()
      },
      async realAnalysis() {
        // if(this.form.time){
        //   this.form.time = changeDate(this.form.time)
        // }
        // var params = {
        //   timeType: this.form.timeType,
        //   time: this.form.timeType=='1'?this.form.time:this.form.Mtime,
        // }
        const {data} = await shopSurvey();
        console.log(data)
        if (data) {
          this.jyData.shopNum = data.shopNum?data.shopNum:0
          this.jyData.zhiShopNum = data.zhiShopNum?data.zhiShopNum:0
          this.jyData.jiaShopNum = data.jiaShopNum?data.jiaShopNum:0
          this.jyData.money = data.money?data.money:0

          this.tableData = data.shopData?data.shopData:[]
          this.echarts2_option.series[0].data = data.moneyResult.map(item => item.money);
          this.echarts2_option.series[1].data = data.payResult.map(item => item.money);
          this.echarts2_option.xAxis.data = data.moneyResult.map(item => item.hours);
          this.zhentiEch()

          // this.bus.$emit('loading', false)
        }
      },
      zhentiEch() {
        let myChart = echarts.init(document.getElementById('zhentiEch'))
        myChart.setOption(this.echarts2_option, true)
      },
    }
  }
</script>
